<template>
  <q-page style="min-height: 100%" class="q-pa-md">
    <div class="column items-center">
      <div class="col" style="font-size: 24px">Create an Account</div>
    </div>
    <ValidationObserver v-slot="{ invalid }">
      <q-form class="q-pa-md">
        <ValidationProvider
          name="Email"
          rules="required|email"
          v-slot="{ errors }"
        >
          <q-input
            outlined
            bg-color="blue-grey-8"
            v-model="email"
            label="Email"
            :error="errors.length>0"
            :error-message="errors[0]"
          />
        </ValidationProvider>
        <ValidationProvider
          rules="required"
          name="Username"
          v-slot="{ errors }"
        >
          <q-input
            outlined
            bg-color="blue-grey-8"
            v-model="username"
            label="USERNAME"
            :error="errors.length>0"
            :error-message="errors[0]"
          />
        </ValidationProvider>
        <ValidationProvider
          rules="required|password"
          name="Password"
          v-slot="{ errors }"
        >
          <q-input
            outlined
            bg-color="blue-grey-8"
            v-model="password"
            type="password"
            label="PASSWORD"
            :error="errors.length>0"
            :error-message="errors[0]"
          />
        </ValidationProvider>
        <ValidationProvider
          rules="required|password"
          name="Birthday"
          v-slot="{ errors }"
        >
          <q-input
            label="BIRTHDAY"
            filled
            v-model="birthday"
            outlined
            bg-color="blue-grey-8"
            mask="date"
            :rules="['date']"
            :error="errors.length>0"
            :error-message="errors[0]"
          >
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy
                  ref="qDateProxy"
                  transition-show="scale"
                  transition-hide="scale"
                >
                  <q-date v-model="birthday">
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="Close" color="primary" flat />
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </ValidationProvider>

        <q-btn
          :disable="invalid"
          color="primary"
          class="full-width"
          size="lg"
          @click="registe"
        >LET'S GO!</q-btn>
      </q-form>
    </ValidationObserver>

    <div class="q-px-md register-methods">
      <div class="back-text" @click="back">Already have an account?</div>
      <div
        class="agreement"
      >By registering, you agree to Turtool's Terms of Service and Privacy Policy</div>
    </div>
  </q-page>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
const electron = require('electron');
@Component({})
export default class Register extends Vue {
  private email = '';
  private username = '';
  private password = '';
  private birthday = '';
  back() {
    this.$router.go(-1);
  }

  registe() {
    electron.ipcRenderer.send('loginFinish', '');
  }
}
</script>
<style lang="stylus" scoped>
.back-text {
  color: $primary;
  font-size: 12px;
  cursor: pointer;
}

.agreement {
  color: #7F8790;
}

.register-methods {
  font-size: 10px;
}
</style>
